<template>
  <view class="commission-page">
    <scroll-view class="list" scroll-y @scrolltolower="loadMore">
      <view class="item" v-for="it in list" :key="it.id">
        <view class="row">
          <text class="type">{{ typeText(it.type) }}</text>
          <text class="amount" :class="{ inc: it.amount > 0 }">{{ sign(it.amount) }}¥{{ it.amount }}</text>
        </view>
        <view class="sub">{{ it.remark }}</view>
        <view class="time">{{ it.created_at }}</view>
      </view>
      <view class="loadmore" v-if="hasMore"><text>{{ loading ? '加载中…' : '上拉加载更多' }}</text></view>
      <view class="empty" v-if="!loading && list.length===0">暂无佣金记录</view>
    </scroll-view>
  </view>
</template>

<script setup>
// 中文注释：佣金记录列表
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { userApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const list = ref([])
const page = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const hasMore = ref(true)

const typeText = (t) => ({ order: '订单佣金', invite: '邀请奖励', adjust: '调整' }[t] || '其他')
const sign = (n) => (Number(n) >= 0 ? '+' : '-')

const fetchList = async () => {
  if (loading.value || !hasMore.value) return
  loading.value = true
  try {
    const data = await userApi.getCommissionRecords({ page: page.value, page_size: pageSize.value })
    const items = data.list || []
    list.value = page.value === 1 ? items : [...list.value, ...items]
    hasMore.value = items.length === pageSize.value
    page.value++
  } catch (e) {
    proxy?.$showToast?.('加载失败')
  } finally {
    loading.value = false
  }
}

const loadMore = () => fetchList()

onLoad(() => fetchList())
</script>

<style scoped lang="scss">
.commission-page { min-height: 100vh; background: #f8f8f8; }
.list { height: 100vh; padding: 20rpx; box-sizing: border-box; }
.item { background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 16rpx; }
.row { display: flex; justify-content: space-between; align-items: baseline; }
.type { font-size: 28rpx; color: #333; }
.amount { font-size: 30rpx; color: #333; }
.amount.inc { color: #ff6b00; font-weight: 600; }
.sub { margin-top: 6rpx; color: #666; font-size: 24rpx; }
.time { margin-top: 6rpx; color: #999; font-size: 22rpx; }
.loadmore { text-align: center; color: #999; padding: 20rpx 0; }
.empty { text-align: center; color: #999; padding: 60rpx 0; }
</style>
